<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
    <div class="default-header">
        <div class="row">
            <h1 class="col">Ethernet hub settings</h1>
        </div>
    </div>
    <div class="default-content" *ngIf="ethernetHubTemplate">
        <mat-card>
            <form [formGroup]="inputForm">
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="ethernetHubTemplate.name" 
                        formControlName="templateName"
                        placeholder="Template name">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="ethernetHubTemplate.default_name_format" 
                        formControlName="defaultName"
                        placeholder="Default name format">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="text" 
                        [(ngModel)]="ethernetHubTemplate.symbol" 
                        formControlName="symbol"
                        placeholder="Symbol">
                </mat-form-field>
                <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
                <mat-form-field class="form-field">
                    <mat-select 
                        placeholder="Category" 
                        [ngModelOptions]="{standalone: true}" 
                        [(ngModel)]="ethernetHubTemplate.category">
                        <mat-option *ngFor="let category of categories" [value]="category[1]">
                            {{category[0]}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input 
                        matInput type="number" 
                        [(ngModel)]="numberOfPorts" 
                        [ngModelOptions]="{standalone: true}"
                        placeholder="Number of ports">
                </mat-form-field>
            </form>
        </mat-card>
        <div class="buttons-bar">
            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
            <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
        </div>
    </div>
</div>
<app-symbols-menu *ngIf="isSymbolSelectionOpened && ethernetHubTemplate" [server]="server" [symbol]="ethernetHubTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
